<template>
	<view>
		<view class="videocss">
			<view class="video-item" v-for="(item,index) in videoList" :key="index" @click="toVideoDetail(item)">
				<image class="video-pic" :src="item.tv_image"></image>
				<view class="tv_name">{{item.tv_name}}</view>
				<text class="rankcss"
					:style="index==0?'background-color: #f99772;':(index==1?'background-color: #fdb54e;':(index==2?'background-color: #ffd34d;':'background-color: #9e9a99;'))">
					{{index+1}}</text>
			</view>
		</view>

		<u-gap height="70rpx"></u-gap>
	</view>
</template>

<script>
	const db = uniCloud.database();
	const _ = db.command;
	export default {
		data() {
			return {
				videoList: [],
			}
		},
		async onLoad() {
			var that = this
			vk.callFunction({
				url: 'client/pages/pub/tv_rank',
				title: '请求中...',
				data: {
					appid: vk.vuex.get('$app.appid')
				},
				success: (data) => {
					that.videoList = data.tvRank
				}
			});
		},
		onShareAppMessage() {
			console.log("触发分享");
			//带上个人邀请码转发
			return {
				title: '', // 默认为小程序名称
				path: '/pages_sub/rank/rank',
				imageUrl: '' // 默认为当前页面的截图
			}
		},
		onShow() {
		},
		methods: {
			async toVideoDetail(item) {
				if (item.tv_id) {
					const tvinfo = await db.collection('a_tv').doc(item.tv_id).get()
					item = tvinfo.result.data[0]
				}

				vk.vuex.set('$app.currenttv', item)
				uni.navigateTo({
					url: '/pages/player/player?tv_id=' + item._id,
				})
			},
		}
	}
</script>

<style>
	.videocss {
		display: flex;
		flex-wrap: wrap;
	}

	.video-item {
		margin: 12rpx 20rpx;
		box-shadow: 0 4rpx 8rpx 0 rgba(121, 121, 121, 0.2);
		border-radius: 0 0 10rpx 10rpx;
		width: 335rpx;
	}

	.tv_name {
		font-size: 28rpx;
		margin: 0 0 6rpx 16rpx;
		display: -webkit-box;
		overflow: hidden;
		white-space: normal !important;
		text-overflow: ellipsis;
		word-wrap: break-word;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.video-pic {
		width: 100%;
		height: 500rpx;
		border-radius: 10rpx 10rpx 0 0;
	}

	.rankcss {
		position: absolute;
		font-size: 34rpx;
		font-weight: 800;
		color: #fff;
		padding: 4rpx 40rpx;
		border-radius: 10rpx 0rpx 10rpx 0rpx;
		margin-top: -558rpx;
	}
</style>